
<template>
  <div>
    <!-- 一条单元格数据 列表 -->
    <van-cell @click="cellClickFn">
      <template #title>
        <div class="title-box">
          <span>{{ artobj.title }}</span>
          <!-- <img
            class="thumb"
            v-if="artobj.cover.type === 1"
            :src="artobj.cover.images[0]"
            alt=""
          /> -->
          <van-image
            class="thumb"
            v-if="artobj.cover.type === 1"
            :src="artobj.cover.images[0]"
          >
            <template v-slot:error>图片加载失败</template>
          </van-image>
        </div>
        <div class="thumb-box" v-if="artobj.cover.type > 1">
          <!-- <img
            class="thumb"
            v-for="(imgUrl, index) in artobj.cover.images"
            :key="index"
            :src="imgUrl"
            alt=""
          /> -->
          <van-image
            class="thumb"
            v-for="(imgUrl, index) in artobj.cover.images"
            :key="index"
            :src="imgUrl"
            alt=""
          >
            <template v-slot:error>图片加载失败</template>
          </van-image>
        </div>
      </template>

      <template #label>
        <div class="label-box">
          <div>
            <span>{{ artobj.aut_name }}</span>
            <span>{{ artobj.comm_count }}评论</span>
            <span>{{ formatTime(artobj.pubdate) }}</span>
          </div>

          <!-- 弹窗 反馈按钮 -->
          <van-icon @click.stop="show = true" name="cross" v-if="isShow" />
        </div>
      </template>
    </van-cell>

    <!-- 弹窗 -->
    <div>
      <van-action-sheet
        get-container="body"
        v-model="show"
        :actions="actions"
        @select="onSelect"
        @cancel="onCancelFn"
        @close="onCloseFn"
        :cancel-text="buttomText"
      />
    </div>
  </div>
</template>

<script>
import { timeAgo } from "@/utils/date";
import { firstActions, secondActions } from "@/api/reqort.js";
export default {
  props: {
    artobj: Object, //文章对象
    isShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: false,
      actions: firstActions, //反馈面板选项数组(套对象)
      buttomText: "取消",
    };
  },
  methods: {
    formatTime: timeAgo, //函数体是timeAgo

    // 反馈面板-"选项"选择事件
    onSelect(actions, item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      // this.show = false;
      // Toast(actions.name);
      // console.log(actions);

      if (actions.name === "反馈垃圾内容") {
        this.actions = secondActions;
        this.buttomText = "返回";
      } else if (actions.name === "不感兴趣") {
        this.$emit("disLikeEV", this.artobj.art_id);
        this.show = false; //无论成功还是失败-都直接让反馈面板隐藏
      } else {
        //二级反馈选项
        this.$emit("reportEV", this.artobj.art_id, actions.value);
        this.show = false; //无论成功还是失败-都直接让反馈面板隐藏
      }
    },

    // 反馈面板-底部按钮 -点击事件
    onCancelFn() {
      if (this.buttomText === "返回") {
        this.show = true;
        this.actions = firstActions;
        this.buttomText = "取消";
      }
    },

    // 反馈面板-关闭面板-触发事件
    onCloseFn() {
      this.actions = firstActions;
      this.buttomText = "取消";
    },

    // 文章单元格-点击进入文章详情
    cellClickFn() {},
  },
};
</script>

<style lang="less" scoped>
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    margin: 0 3px;
    &:first-child {
      margin-left: 0;
    }
  }
}

.thumb {
  width: 113px;
  height: 70px;
  background: #f8f8f8;
  object-fit: cover;
}

.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>